<template>
	<view style="height: 100%;">
		<view class="num-frame" :class="{'num-frame-ok' : ok}">
			<view class="title">
				{{title}}
			</view>
			<view class="desc">
				{{num}}{{unit}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"num-frame",
		props: {
			title: {
				type: String,
				default: ''
			},
			num: {
				type: Number,
				default: 0
			},
			unit: {
				type: String,
				default: ''
			},
			ok: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style scoped>
	
	.num-frame {
		height: 100%;
		width: 240px;
		/* background-color: orange; */
		background-color: rgba(71, 71, 71, 1.0);
		border: 2px rgba(113, 113, 113, 1.0) solid;
		border-radius: 5px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.num-frame-ok {
		background-color: #084200;
	}
	
	.title {
		color: wheat;
		font-size: 16px;
	}
	
	.desc {
		color: wheat;
		margin-top: 10px;
		font-size: 18px;
	}

</style>